import { PlusOutlined } from '@ant-design/icons';
import { Input, Tag } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
import React, { useEffect, useRef, useState } from 'react';
const App = (props) => {
    const [tags, setTags] = useState([]);
    const [inputVisible, setInputVisible] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const inputRef = useRef(null);

    useEffect(() => {
        if (inputVisible) {
            inputRef.current?.focus();
        }
    }, []);
    useEffect(() => {
        setTags(props.tags)
    }, [props])
    const handleClose = (removedTag) => {
        const func = () => {
            const newTags = tags.filter((tag) => tag !== removedTag);
            setTags(newTags);
            props.updateItem(newTags)
        }

        if (props.type == 'edit') {
            React.$confirm({
                title: "提示",
                type: 'warning',
                content: "删除规格值后，已创建的基础价格信息都会被删除，是否继续操作？",
                onOk: async () => {
                    func()
                },
            });
        } else {
            func()
        }

    };
    const showInput = () => {
        setInputVisible(true);
    };
    const handleInputChange = (e) => {
        setInputValue(e.target.value.replace(' ', ''));
    };
    const handleInputConfirm = () => {
        if (inputValue && tags.indexOf(inputValue) === -1) {
            setTags([...tags, inputValue]);
            props.updateItem([...tags, inputValue])
        }
        setInputVisible(false);
        setInputValue('');
    };
    const forMap = (tag) => {
        const tagElem = (
            <Tag
                closable={!(props.type == 'detail')}
                onClose={(e) => {
                    e.preventDefault();
                    handleClose(tag);
                }}
            >
                {tag}
            </Tag>
        );
        return (
            <span
                key={tag}
                style={{
                    display: 'inline-block',
                }}
            >
                {tagElem}
            </span>
        );
    };
    const tagChild = tags.map(forMap);
    return (
        <>
            <div
                style={{
                    marginBottom: 16,
                }}
            >
                <TweenOneGroup
                    enter={{
                        scale: 0.8,
                        opacity: 0,
                        type: 'from',
                        duration: 100,
                    }}
                    onEnd={(e) => {
                        if (e.type === 'appear' || e.type === 'enter') {
                            e.target.style = 'display: inline-block';
                        }
                    }}
                    leave={{
                        opacity: 0,
                        width: 0,
                        scale: 0,
                        duration: 200,
                    }}
                    appear={false}
                >
                    {tagChild}
                    {inputVisible && (
                        <Input
                            ref={inputRef}
                            type="text"
                            size="small"
                            style={{
                                width: 78,
                            }}
                            maxLength={10}
                            value={inputValue}
                            onChange={handleInputChange}
                            onBlur={handleInputConfirm}
                            onPressEnter={handleInputConfirm}
                        />
                    )}
                    {!inputVisible && !(props.type == 'detail') && tags.length < 10 && (
                        <Tag onClick={showInput} className="site-tag-plus" >
                            <PlusOutlined /> 添加值
                        </Tag>
                    )}
                </TweenOneGroup>

            </div>

        </>
    );
};
export default App;